<template>
  <div class="weather-app">
    <!-- 当前天气 -->
    <div class="current-weather">
      <div class="rent-weather">
        <div class="location">{{ cityName }}</div>
        <div class="temperature">{{ wnow.temp }}°</div>
        <div class="weather-desc">
          <i :class="`qi-${wnow.icon}`" style="font-size: 30px; margin-right: 10px"></i
          >{{ wnow.text }}
        </div>
        <div class="high-low">
          最高 {{ wdays[0]?.tempMax || '---' }}° 最低 {{ wdays[0]?.tempMin || '---' }}°
        </div>
      </div>
    </div>
    <!-- 24小时天气预报 -->
    <div class="hourly-forecast">
      <div class="section-title">24小时预报</div>
      <div class="hourly-scroll">
        <div v-for="(hour, index) in w24h" :key="index" class="hourly-item">
          <div class="hour">{{ formatHour(hour.fxTime) }}</div>
          <div class="hourly-icon">
            <i :class="`qi-${hour.icon}`"></i>
          </div>
          <div class="hourly-temp">{{ hour.temp }}°</div>
        </div>
      </div>
    </div>

    <!-- 7天天气预报 -->
    <div class="daily-forecast">
      <div class="section-title">7天预报</div>
      <div class="daily-list">
        <div v-for="(day, index) in wdays" :key="index" class="daily-item">
          <div class="day">{{ formatDay(day.fxDate) }}</div>
          <div class="daily-icon">
            <i :class="`qi-${day.iconDay}`"></i>
          </div>
          <div class="daily-temp-range">
            <div class="temp-bar">
              <div class="temp-bar-inner" :style="getTempBarStyle(day)"></div>
            </div>
            <div class="temp-min">{{ day.tempMin }}°</div>
            <div class="temp-max">{{ day.tempMax }}°</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { weatherNow, weatherDay, weather24Hour } from '@/api/weather'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

let cityName = ref('南京')
let wnow = ref({})
let wdays = ref([])
let w24h = ref([])

const route = useRoute()
cityName.value = route.params.cityName

onMounted(async () => {
  try {
    const [resNow, resDays, resH24] = await Promise.all([
      weatherNow(cityName.value),
      weatherDay(cityName.value, 7),
      weather24Hour(cityName.value),
    ])

    wnow.value = resNow.data.now
    wdays.value = resDays.data.daily
    w24h.value = resH24.data.hourly
  } catch (error) {
    console.error('Failed to fetch weather data:', error)
  }
})

const formatHour = (timeString) => {
  const date = new Date(timeString)
  return date.getHours() + '时'
}
const formatDay = (dateString) => {
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const date = new Date(dateString)
  const today = new Date()

  if (date.toDateString() === today.toDateString()) {
    return '今天'
  }

  const tomorrow = new Date()
  tomorrow.setDate(today.getDate() + 1)
  if (date.toDateString() === tomorrow.toDateString()) {
    return '明天'
  }

  return days[date.getDay()]
}
const getTempBarStyle = (day) => {
  // 计算温度条的样式
  const minTemp = Math.min(...wdays.value.map((d) => d.tempMin))
  const maxTemp = Math.max(...wdays.value.map((d) => d.tempMax))
  const range = maxTemp - minTemp

  const leftPercent = ((day.tempMin - minTemp) / range) * 100
  const widthPercent = ((day.tempMax - day.tempMin) / range) * 100

  return {
    left: `${leftPercent}%`,
    width: `${widthPercent}%`,
  }
}
</script>

<style scoped>
.weather-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  color: white;
  background: linear-gradient(180deg, #4b6cb7 0%, #182848 100%);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.current-weather {
  text-align: center;
  padding: 30px 0;
}

.location {
  font-size: 24px;
  margin-bottom: 10px;
}

.temperature {
  font-size: 72px;
  font-weight: 200;
  line-height: 1;
}

.weather-desc {
  font-size: 20px;
  margin: 10px 0;
}

.high-low {
  font-size: 16px;
  opacity: 0.8;
}

.section-title {
  font-size: 18px;
  margin: 20px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hourly-scroll {
  display: flex;
  overflow-x: auto;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
}

.hourly-item {
  flex: 0 0 auto;
  width: 60px;
  text-align: center;
  padding: 10px;
}

.hour {
  font-size: 14px;
  margin-bottom: 10px;
}

.hourly-icon img {
  width: 30px;
  height: 30px;
}

.hourly-temp {
  font-size: 16px;
  margin-top: 10px;
}

.daily-list {
  margin-top: 10px;
}

.daily-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.day {
  width: 60px;
  font-size: 16px;
}

.daily-icon {
  width: 40px;
  text-align: center;
}

.daily-icon img {
  width: 30px;
  height: 30px;
}

.daily-temp-range {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.temp-bar {
  flex: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
  margin: 0 10px;
}

.temp-bar-inner {
  position: absolute;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
}

.temp-min,
.temp-max {
  width: 30px;
  text-align: right;
  font-size: 14px;
}

.temp-min {
  opacity: 0.7;
}
</style>
